<template>
  <input type="text" v-model="msg.foo.bar.name"> <br>
  <input type="text" v-model="msg1"><br>
  <br>
  <input type="text" v-model="msg2.foo.bar.name">
  <input type="number" v-model="msg2.foo.bar.age">
  <br><br>
  <input type="text" v-model="msg3">
  <input type="text" v-model="msg4">
</template>

<script setup lang='ts'>
import { ref, reactive, watch } from 'vue'

const msg = ref({
  foo: {
    bar: {
      name: '孙小双'
    }
  }
})

watch(msg, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, {
  deep: true    // ref对象深度监听，reactive对象无需设置此项
})

const msg1 = ref('孙小双')
watch(msg1, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, {
  immediate: true   // 立即执行一次
})

const msg2 = reactive({
  foo: {
    bar: {
      name: '华天晓',
      age: 11
    }
  }
})
watch(() => msg2.foo.bar.age, (newVal, oldVal) => { // 监听对象单个属性
  console.log(newVal, oldVal)
})


const msg3 = ref('')
const msg4 = ref('')
// 监听多个
watch([msg3, msg4], (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

</script>

<style lang='scss' scoped>

</style>